<template>
  <basic-container>
    <basic-header title="选择轮播图" />
    <avue-crud :page="pageOption" :option="tableOption" :data="tableData" :table-loading="loading" @current-change="handlePageTo" @size-change="handleSizeChange">
      <template slot-scope="{ row }" slot="menu">
        <el-button type="primary" size="small" icon="el-icon-share" @click.stop="handleChoose(row)">选择</el-button>
      </template>
    </avue-crud>
  </basic-container>
</template>
<script>
/**
 * 此页面为轮播图详情点击选择商品后跳转的商品列表
 */
import actionTypes from "@/const/action";
import cloumnsOptionMap from "@/const/columns";
import { SyncGetTableData } from "@/api/table";
import { mapMutations, mapState } from "vuex";

const DEFAULT_TABLE_OPTIONS = {
  refreshBtn: false,
  columnBtn: false,
  addBtn: false,
  maxHeight: 560,
  border: false,
  menuWidth: 290,
  menuAlign: "center",
  align: "center",
  editBtn: false,
  delBtn: false,
  header: false
};

export default {
  name: "first",
  data() {
    return {
      action: actionTypes.GOODS_MANAGE,
      formPath: "",
      pageOption: {
        total: 0, //总页数
        currentPage: 1, //当前页数
        pageSize: 10 //每页显示多少条
      },
      tableData: [],
      loading: false
    };
  },
  computed: {
    ...mapState("table", ["currentData"])
  },
  created() {
    this.tableOption = {
      ...DEFAULT_TABLE_OPTIONS,
      column: cloumnsOptionMap[this.action] || []
    };
    this.getPageData();
  },
  methods: {
    ...mapMutations({
      setCurrentData: "table/SET_CURRENT_DATA"
    }),
    async getPageData() {
      this.loading = true;
      const { data, error } = await SyncGetTableData(this.action, {
        pageIndex: this.pageOption.currentPage,
        pageSize: this.pageOption.pageSize
      });
      if (error) {
        this.$message({
          type: "error",
          message: error
        });
      } else {
        this.setPageOption({
          total: data.count
        });
        this.tableData = data.bussData;
      }
      this.loading = false;
    },
    setPageOption(opt) {
      this.pageOption = Object.assign({}, this.pageOption, opt);
    },
    handleChoose(row) {
      this.setCurrentData(
        Object.assign({}, this.currentData, {
          productId: row.id,
          productName: row.productName,
          productDTO: { productName: row.productName }
        })
      );
      this.$router.go(-1);
    },
    handlePageTo(num) {
      this.setPageOption({
        currentPage: num
      });
      this.getPageData();
    },
    handleSizeChange(size) {
      this.setPageOption({
        currentPage: 1,
        pageSize: size
      });
      this.getPageData();
    },
    setFormPath(form) {
      const { action, type } = form.query;
      let formPath = form.path + "?";
      if (action) {
        formPath += `action=${action}`;
      }
      if (type) {
        formPath += `type=${type}`;
      }
      this.formPath = formPath;
    }
  }
};
</script>


